<script setup>
import api from '../api/scheduleApi.js'
import { ref, onMounted, computed } from "vue"
import lodash from "lodash";
import { ElMessage, ElMessageBox } from 'element-plus'


//定义绑定的数据
//表格中的数据
const tableData = ref({});
const total=ref(0);
const editWinVisible = ref(false);
//查询数据
const searchObj = ref({
  current: 1,
  limit: 11,
  total: 0,
  trainId: '',
  stationId: '',
  stationOrder: '',
  stopMinutes: ''
});

//要修改或者新增的数据
const obj = ref({});

// 页面加载后使用默认查询条件查询数据
onMounted(async () => {
  await searchStation();
})

// 查询车票的方法
const searchStation = async () => {
  tableData.value = await api.page(searchObj.value);
  total.value = tableData.value.count;
}

//编辑修改
const handleEdit = (index, row) => {
  console.log(index, row)
  obj.value=lodash.clone(row);
  editWinVisible.value=true;
}
//删除
const handleDelete = (index, row) => {
  console.log(index, row)
  ElMessageBox.confirm(
      '确认删除该行数据吗？',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await api.del(row.id);
        //重新加载数据
        searchObj.value.current = 1;
        await handleSearch();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

//前一页
const handleSizeChange=() => {
  searchStation();
}
//后一页
const handleCurrentChange=(val) => {
  searchStation();
}
//查询
const handleSearch=async () => {
  searchObj.value.current = 1;
  searchStation();
}
//取消修改操作
const editCancel = () => {
  obj.value = {};//清空数据
  editWinVisible.value = false;//关闭对话框
}
//修改提交
const editCommit = async () => {
  console.log("传参",obj.value);
  await api.edit(obj.value);
  searchStation();
  editWinVisible.value = false;//关闭对话框
}
//定义方法
const search = ref('')
const filterTableData = computed(() =>
    tableData.value.data?.filter(
        (data) =>
            !search.value ||
            data.trainId.toString().includes(search.value)
    ) || []
)


const addWinVisible=ref( false);
//新增
const handleAdd=() => {
  obj.value = {}
  addWinVisible.value = true;
}
//取消新增操作
const addCancel = () => {
  obj.value = {};
  addWinVisible.value = false;//关闭对话框
}
//新增提交
const addCommit = async () => {
  await api.add(obj.value);
  searchObj.value.current = 1;
  searchStation();
  addWinVisible.value = false;//关闭对话框
}





</script>

<template>
  <!--搜索框-->
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px">
    <el-form-item label="列车ID">
      <el-input v-model="searchObj.trainId" placeholder="请输入列车ID" clearable />
    </el-form-item>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">新增班次</el-button>
      </el-form-item>
    </el-form>
  </el-form>

<!--  <div class="toolbar">-->
<!--    <el-button type="primary" @click="handleAdd" round>-->
<!--      <el-icon><Plus /></el-icon>-->
<!--      新增列车-->
<!--    </el-button>-->
<!--  </div>-->


  <!-- 数据展示区域 -->
  <!-- 车票表格 -->
  <el-table :data="filterTableData" style="width: 100%; margin-top: 20px;">
    <el-table-column label="列车ID" prop="trainId"/>
    <el-table-column label="发车日期" prop="date"/>
    <el-table-column label="班次顺序" prop="runNo"/>
    <el-table-column label="总共座位" prop="totalSeats"/>
    <el-table-column label="剩余座位" prop="remainSeats"/>
    <el-table-column label="发车状态" prop="status"/>

    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>

      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[1, 2, 3, 4]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />


  <!--编辑对话框表单-->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="obj">
      <el-form-item label="列车ID">
        <el-input v-model="obj.trainId"/>
      </el-form-item>
      <el-form-item label="发车日期">
        <el-date-picker
            v-model="obj.date"
            type="datetime"
            value-format="YYYY-MM-DDTHH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="班次顺序">
        <el-input v-model="obj.runNo"/>
      </el-form-item>
      <el-form-item label="总共座位">
        <el-input v-model="obj.totalSeats"/>
      </el-form-item>
      <el-form-item label="剩余座位">
        <el-input v-model="obj.remainSeats"/>
      </el-form-item>
      <el-form-item label="发车状态">
        <el-input v-model="obj.status"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!--新增对话框-->
  <el-dialog v-model="addWinVisible" title="新增" width="500">
    <el-form :model="obj">
      <el-form-item label="列车ID">
        <el-input v-model="obj.trainId"/>
      </el-form-item>
      <el-form-item label="发车日期">
        <el-date-picker
            v-model="obj.date"
            type="datetime"
            value-format="YYYY-MM-DDTHH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="班次顺序">
        <el-input v-model="obj.runNo"/>
      </el-form-item>
      <el-form-item label="总共座位">
        <el-input v-model="obj.totalSeats"/>
      </el-form-item>
      <el-form-item label="剩余座位">
        <el-input v-model="obj.remainSeats"/>
      </el-form-item>
      <el-form-item label="发车状态">
        <el-input v-model="obj.status"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>



</template>










<style scoped>
.search-card {
  margin-bottom: 20px;
}

.no-data-container {
  text-align: center;
  padding: 40px 20px;
}

.no-data-image {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.no-data-text {
  font-size: 16px;
  color: #909399;
  margin: 0;
}

.toolbar {
  padding: 20px 0;
  text-align: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 20px;
}

.toolbar .el-button {
  font-size: 16px;
  padding: 12px 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.toolbar .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

</style>
